<template>
	<view class="container">
		<view class="payment-tabs">
			<view v-for="(item, index) in paymentMethods" :key="index" class="tab-item"
				:class="{ active: activeTab === index }" @tap="switchTab(index)">
				<image class="tab-icon" :src="item.icon" v-if="activeTab === index"></image>
				<image class="tab-icon" :src="item.qrcode" v-else></image>
				<text class="tab-text">{{ item.name }}</text>
			</view>
		</view>

		<view class="content">
			<view class="account-info" v-if="activeTab ==0">
				<view class="info-item">
					<text class="label">持卡人</text>
					<input v-model="realName" class="en-input" placeholder="请输入持卡人" />
				</view>
				<view class="line" />
				<view class="info-item">
					<text class="label">卡号</text>
					<input v-model="bankNo" class="en-input" placeholder="请输入卡号" />
				</view>
				<view class="line" />
				<view class="info-item">
					<text class="label">银行</text>
					<input v-model="bankName" class="en-input" placeholder="请填写银行"/>
					<!-- <uni-section title="本地数据" type="line">
						<uni-data-select v-model="bankName" :localdata="range" @change="change"></uni-data-select>
					</uni-section> -->
				</view>
			</view>
			<view class="account-info" v-if="activeTab ==1">
				<view class="info-item">
					<text class="label">账号</text>
					<input v-model="wechatNo" class="en-input" placeholder="请填写您的微信账号" />
				</view>
				<view class="line" />
				<view class="info-item">
					<text class="label">收款码</text>
					<image :src="wxReceiveImg" class="nodata" @click.stop='uploadpic' v-if="wxReceiveImg"></image>
					<image src="/static/blind/tup.png" class="nodata" @click.stop='uploadpic' v-else></image>
				</view>
			</view>
			<view class="account-info" v-if="activeTab ==2">
				<view class="info-item">
					<text class="label">账号</text>
					<input v-model="alipayNo" class="en-input" placeholder="请填写您的支付宝账号" />
				</view>
				<view class="line" />
				<view class="info-item">
					<text class="label">收款码</text>
					<image :src="alipayReceiveImg" class="nodata" @click.stop='uploadpic1' v-if="alipayReceiveImg">
					</image>
					<image src="/static/blind/tup.png" class="nodata" @click.stop='uploadpic1' v-else></image>
				</view>
			</view>
		</view>

		<!-- 绑定按钮 -->
		<button class="bind-btn" @tap="handleBind">立即绑定</button>
	</view>
</template>

<script>
	import {
		submitbank,
		getbankList,
		gettradeList
	} from '@/api/new.js';
	import store from '@/store/modules/app.js';
	export default {
		data() {
			return {
				activeTab: 0, // 默认选中第一个
				paymentMethods: [{
						name: '银行卡',
						icon: '/static/blind/ucard.png',
						account: '622588******1234',
						qrcode: '/static/blind/card.png',
						tip: '推荐使用银行卡转账'
					},
					{
						name: '微信',
						icon: '/static/blind/uwx.png',
						account: 'wx_19174926503',
						qrcode: '/static/blind/wx.png',
						tip: '推荐使用微信扫一扫'
					},
					{
						name: '支付宝',
						icon: '/static/blind/uzfb.png',
						account: '19174926503',
						qrcode: '/static/blind/zfb.png',
						tip: '推荐使用支付宝'
					}
				],
				avatarUrl: "",
				range: [{
						value: 0,
						text: "中国银行"
					},
					{
						value: 1,
						text: "中国农业"
					},
				],
				realName: "",
				wxReceiveImg: "",
				bankNo: "",
				bankName: "",
				alipayNo: "",
				alipayReceiveImg: "",
				loading: false
			}
		},
		computed: {
			currentMethod() {
				return this.paymentMethods[this.activeTab]
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			// GetLists: function() {
			// 	this.loading = true
			// 	getbankList().then((res) => {
			// 		console.log("res", res)
			// 	}).catch(err => {
			// 		this.loading = false
			// 	});
			// },
			getList: function() {
				this.loading = true
				const data = {}
				getbankList(data).then((res) => {
					console.log("res", res)
					this.realName = res.data.realName
					this.bankNo = res.data.bankNo
					// this.range.forEach((item) => {
					// 	if (item.text === res.data.bankName) {
					// 		this.bankName = item.value
					// 	}
					// })
					this.wechatNo = res.data.wechatNo
					this.wxReceiveImg = res.data.wxReceiveImg
					this.alipayNo = res.data.alipayNo
					this.alipayReceiveImg = res.data.alipayReceiveImg
					this.loading = false
				}).catch(err => {
					this.loading = false
				});
			},
			switchTab(index) {
				this.activeTab = index
			},
			/**
			 * 上传文件
			 *
			 */
			uploadpic: function() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					name: 'multipart',
					model: "maintain",
					pid: 0,
					count: 1
				}, function(res) {
					that.wxReceiveImg = res;
				});
			},
			/**
			 * 上传文件
			 *
			 */
			uploadpic1: function() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					name: 'multipart',
					model: "maintain",
					pid: 0,
					count: 1
				}, function(res) {
					that.alipayReceiveImg = res;
				});
			},
			change(e) {
				console.log(e)
				this.bankName = this.range[e].text
			},
			// 银行卡
			onPopup: function() {

			},
			// 立即提交
			handleBind() {
				let data = {
					userId: store.state.uid,
					realName: this.realName,
					bankNo: this.bankNo,
					bankName: this.bankName,
					wechatNo: this.wechatNo,
					wxReceiveImg: this.wxReceiveImg,
					alipayNo: this.alipayNo,
					alipayReceiveImg: this.alipayReceiveImg
				}
				if (this.activeTab === 0) {
					if (this.realName === "") {
						this.$util.Tips({
							title: "请填写持卡人"
						});
						return
					}
					if (this.bankNo === "") {
						this.$util.Tips({
							title: "请填写卡号"
						});
						return
					}
					if (this.bankName === "") {
						this.$util.Tips({
							title: "请选择银行卡"
						});
						return
					}
				} else if (this.activeTab === 1) {
					if (this.wechatNo === "") {
						this.$util.Tips({
							title: "请填写账号"
						});
						return
					}
					if (this.wxReceiveImg === "") {
						this.$util.Tips({
							title: "请上传收款码"
						});
						return
					}
				} else {
					if (this.alipayNo === "") {
						this.$util.Tips({
							title: "请填写账号"
						});
						return
					}
					if (this.alipayReceiveImg === "") {
						this.$util.Tips({
							title: "请上传收款码"
						});
						return
					}
				}

				submitbank(data).then((res) => {
					this.$util.Tips({
						title: "成功"
					});
					this.getList()
					this.loading = false
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
					this.loading = false
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 原有样式保持不变，新增以下样式 */
	.container {
		// padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.sub-title {
		font-size: 24rpx;
		color: #666;
		text-align: center;
		margin-bottom: 60rpx;
	}

	.payment-methods {
		display: flex;
		justify-content: space-around;
		margin-bottom: 60rpx;

		.method-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.method-icon {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 20rpx;
			}

			.method-text {
				font-size: 28rpx;
				color: #333;
			}
		}
	}

	.account-info {
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		margin-bottom: 40rpx;

		.info-item {
			margin-bottom: 40rpx;

			.label {
				font-size: 30rpx;
				color: #666;
				font-weight: 700;
				display: block;
				margin-bottom: 20rpx;
			}

			.value {
				font-size: 26rpx;
				color: #333;
				font-weight: bold;
			}

			.en-input {
				font-size: 28rpx;
			}

			.qrcode {
				width: 400rpx;
				height: 400rpx;
				display: block;
				margin: 0 auto;
			}

			.nodata {
				width: 100rpx;
				height: 100rpx;
				position: relative;
				top: 10px;
			}
		}
	}

	.line {
		width: 100%;
		height: 1px;
		border: 1px solid #f5f5f5;
		transform: scaleY(0.2);
		position: relative;
		top: -8px;
	}

	.tip {
		color: #ff6a00;
		font-size: 28rpx;
		text-align: center;
		margin-bottom: 60rpx;
	}

	.bind-btn {
		width: 90%;
		margin: 0 auto;
		height: 45px;
		line-height: 45px;
		background: red;
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;
	}

	.payment-tabs {
		display: flex;
		justify-content: space-around;
		margin-bottom: 40rpx;

		.tab-item {
			padding: 20rpx;
			text-align: center;
			opacity: 0.6;
			transition: all 0.3s;

			&.active {
				opacity: 1;
				transform: scale(1.1);

				.tab-text {
					color: orangered;
					font-weight: bold;
				}
			}

			.tab-icon {
				width: 60rpx;
				height: 60rpx;
				margin-bottom: 10rpx;
			}

			.tab-text {
				font-size: 24rpx;
				color: #666;
				display: block;
			}
		}
	}

	.content {
		background: #fff;
		// height: 350px;
		margin-bottom: 40rpx;
	}
</style>